<template>
  <Popup
      :round="round"
      v-model="visible"
      :overlay="true"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
  >
    <div class="report-result">
      <div class="countdown">{{ `${time / 1000}` }}</div>
      <!--
        1:成功
        2:失败
        0:警告
      -->
      <template v-if="shownInfo([0,1])">
        <div class="icon-result" :class="getClassName"/>
        <div class="title">{{ info.title }}</div>
        <div class="content">{{ info.content }}</div>
      </template>

      <template v-if="shownInfo([2])">
        <div class="warn-title">{{ info.title }}</div>
        <div class="warn-content">{{ info.content }}</div>
      </template>

      <el-button class="button" @click="handleClose(false)" :loading="loading">确定</el-button>
    </div>
  </Popup>
</template>

<script>
import {Popup, Button} from 'vant';
import {v4 as uuid} from "uuid";

export default {
  name: 'ReportResult',

  componentName: "ReportResult",

  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
    Button
  },

  data() {
    return {
      round: true,
      time: 60000,
      timer: null,
      loading: false
    }
  },

  computed: {
    getClassName() {
      let {state} = (this.info);
      switch (state) {
        case 0:
          return 'icon-fail';
        case 1:
          return 'icon-success';
        case 2:
          return true;
      }
    },


    shownInfo() {
      return function (state) {
        let type = parseInt(this.info.state);
        if (Reflect.has(this.info, 'state')) {
          return state.includes(type);
        } else {
          return false
        }

      }
    }
  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose(statu) {
      const self = this;
      self.$emit('handleCancel')
      self.$emit('handle-cancel')
      self.loading = true;
      clearInterval(self.timer);
      if (!statu) {
        setTimeout(() => {
          self.loading = false;
        }, 1500)
      } else {
        self.loading = false;
      }
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        self.widgetKey = uuid();
        if (val) {
          self.time = (self.info.time) * 1000;
          self.timer = setInterval(() => {
            self.time = (self.time - 1000);
            if ((self.time) === 0) {
              self.handleClose(true);
              clearInterval(self.timer)
            }
            console.log('1关闭倒计时')
          }, 1000)
        } else {
          clearInterval(self.timer)
          console.log('2关闭倒计时')
        }
      },
      deep: true,
      immediate: true
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
